/**
 * Created by huotaol on 2017/5/12.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../../common/style/CustomStyle";
import GiftedListView from "react-native-gifted-listview";
import CommonRenderer from "../../../main/mainUI/CommonRenderer";

export default class CarList extends Component {
    static propTypes = {
        onFetch: PropTypes.func.isRequired,
        firstLoader: PropTypes.bool,
        pagination: PropTypes.bool,
        refreshable: PropTypes.bool,
    };

    static defaultProps = {
        firstLoader: true,
        pagination: true,
        refreshable: true,
    };

    render() {
        return (
            <View style={[this.props.style, {flex: 1}]}>
                <GiftedListView
                    ref="listview"
                    initialListSize={5}
                    onFetch={this._onFetch.bind(this)}
                    rowView={this._renderRow}
                    firstLoader={this.props.firstLoader} // display a loader for the first fetching
                    pagination={this.props.pagination} // enable infinite scrolling using touch to load more
                    enableEmptySections={true}
                    refreshable={this.props.pagination} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    withSections={false} // enable sections
                    refreshableTintColor="#999999"
                    paginationFetchigView={this._renderPaginationFetchigView}
                    paginationAllLoadedView={this._renderPaginationAllLoadedView}
                    paginationWaitingView={this._renderPaginationWaitingView}
                    emptyView={this._renderEmptyView}
                    renderSeparator={this._renderSeparator}
                />
            </View>
        );
    }

    _onFetch(page = 1, callback, options) {
        if (this.props.onFetch) {
            console.log('fetch carlis begin');
            this.props.onFetch(page, options).then(data => {
                console.log('fetch carlis success');
                if (data.data.length) {
                    callback(data.data, {allLoaded: data.finish});
                } else {
                    callback([]);
                }
            }).catch(err => {
                console.log('fetch carlis  err ' + err);
                callback([]);
            });
        }
    }

    _renderRow(rowData) {
        return <CommonRenderer rowData={rowData}/>;
    }


    _refresh() {
        this.refs.listview._refresh();
    }

    /**
     * Render the pagination view when waiting for touch
     * @param {function} paginateCallback The function to call to load more rows
     */
    _renderPaginationWaitingView(paginateCallback) {
        return (
            <TouchableOpacity
                onPress={paginateCallback}
                style={{backgroundColor: '#f6f6f6', height: CustomStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: CustomStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: CustomStyle.getActualSizeInVertical(20),
                    color: '#ddd',
                    fontSize: CustomStyle.getActualFontSize(32)
                }}>点击加载更多.</Text>
            </TouchableOpacity>
        );
    }

    /**
     * Render the pagination view when fetching
     */
    _renderPaginationFetchigView() {
        return (
            <View
                style={{backgroundColor: '#f6f6f6', height: CustomStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: CustomStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: CustomStyle.getActualSizeInVertical(20),
                    color: '#ddd'
                }}>加载中..</Text>
            </View>
        );
    }

    /**
     * Render the pagination view when end of list is reached
     */
    _renderPaginationAllLoadedView() {
        return (
            <View
                style={{backgroundColor: '#f6f6f6', height: CustomStyle.getActualSizeInVertical(88)}}>
                <Text style={{
                    backgroundColor: 'rgba(0,0,0,0)',
                    width: CustomStyle.getActualSizeInHorizontal(750),
                    textAlign: 'center',
                    top: CustomStyle.getActualSizeInVertical(20),
                    color: '#ddd',
                    fontSize: CustomStyle.getActualFontSize(32)
                }}>没有更多车辆啦...</Text>
            </View>
        );
    }

    /**
     * Render a view when there is no row to display at the first fetch
     * @param {function} refreshCallback The function to call to refresh the listview
     */
    _renderEmptyView(refreshCallback) {
        return (
            <TouchableOpacity
                onPress={refreshCallback}
                style={{
                    flex: 1,
                    alignItems: 'center', justifyContent: 'center',
                }}
            >
                <Image source={require('../../../../img/buyCar/empty.png')}
                       resizeMode={'contain'}
                       style={{
                           width: CustomStyle.getActualSizeInHorizontal(538),
                           height: CustomStyle.getActualSizeInVertical(536),
                           justifyContent: 'center',
                           alignItems: 'center',
                       }}>
                    <View style={{
                        backgroundColor: '#ffc000', height: CustomStyle.getActualSizeInVertical(50),
                        width: CustomStyle.getActualSizeInHorizontal(330),
                        borderRadius: CustomStyle.getActualSizeInHorizontal(4),
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginTop: CustomStyle.getActualSizeInVertical(240),
                    }}>
                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(24),
                            color: '#4a3d18',
                        }]}>暂无符合条件车辆</Text>
                    </View>
                </Image>
            </TouchableOpacity>
        );
    }

    _renderSeparator() {
        return <View style={CustomStyle.separator}/>
    }
}